<template>
	<div class="index">
		<div class="tips" v-if="admin_id==3">欢迎来到家具大师管理平台</div>
		<div class="index-name index-box" v-if="admin_id != 3">
			<el-row :gutter="20">
				<el-col :span="admin_id == 2 ? 12 : 18">
					<el-card style="position: relative;">
						<dl>
							<dt>
								<el-image class="image-head" :src="storeInfo.store_logo" fit="cover">
									<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
								</el-image>
							</dt>
							<dd style="width: 80%;">
								<h1>{{ storeInfo.store_name }}</h1>
								<p>{{ storeInfo.address }}</p>
								<p style="height: 28px;">{{ filiale_id == 2 ? '':'电话：' }}{{ storeInfo.service_phone }}</p>
								<p style="height: 28px;" class="store-brief">{{ filiale_id == 2 ? '':'简介：' }}{{ storeInfo.brief }}</p>
							</dd>
						</dl>
						<div class="add" v-if="admin_id != 3 && admin_id == 1">
							<el-button type="primary" size="medium" @click="edit">编辑</el-button>
						</div>
					</el-card>
				</el-col>

				<el-col :span="6" v-if="admin_type == 1 || filiale_id == 2">
					<el-card>
						<div style="cursor: pointer;" @click="goOnline">
							<div style="font-size: 18px;font-weight: bold;text-align: center;">实时在线人数</div>
							<div style="font-size: 18px;font-weight: bold;text-align: center;line-height: 63px;height: 63px;">{{indexData.online_num}}</div>
							<div style="text-align: center;font-size: 14px;color: #999;">点击查看在线人数列表</div>
						</div>
					</el-card>
				</el-col>

				<el-col :span="6" v-if="admin_id == 2">
					<el-card style="position: relative;">
						<div style="height: 111px;">
							<p style="font-size: 22px;">公告</p>
							<p style="line-height: 50px;font-size: 18px;">{{notice}}</p>
						</div>
					</el-card>
				</el-col>
				<el-col :span="6" v-if="admin_id == 2">
					<el-card style="position: relative;">
						<dl style="height: 111px;text-align: center;">
							<dd style="width: 100%;">
								<p style="margin-top: 50px;">账户余额(元)</p>
								<h1 style="color: red;">{{ indexData.store_money }}</h1>
							</dd>
						</dl>
						<div class="add">
							<el-button type="primary" size="medium" @click="cash">去提现</el-button>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>
		<div class="index-data index-box" v-if="admin_id != 3">
			<el-card>
				<div class="index-data-row">
					<div class="index-data-item" @click="goOrderList" style="cursor: pointer;">
						<span>{{ indexData.pay_order_count }}</span>
						<p>已付款订单</p>
					</div>
					<div class="index-data-item" @click="goOrderList" style="cursor: pointer;">
						<span>{{ indexData.waite_pay_count }}</span>
						<p>待支付订单总数</p>
					</div>
					<div class="index-data-item" @click="goOrderList" style="cursor: pointer;">
						<span>{{ indexData.waite_send_count }}</span>
						<p>待发货订单总数</p>
					</div>
					<div class="index-data-item" @click="goOrderList" style="cursor: pointer;">
						<span>{{ indexData.waite_get_count }}</span>
						<p>待收货订单总数</p>
					</div>
					<div class="index-data-item" @click="goOrderList" style="cursor: pointer;">
						<span>{{ indexData.finish_count }}</span>
						<p>已完成订单总数</p>
					</div>
					<div class="index-data-item" @click="goOrderList" style="cursor: pointer;">
						<span>{{ indexData.all_order_count }}</span>
						<p>总订单数量</p>
					</div>
					<div class="index-data-item" @click="goOrderList" style="cursor: pointer;">
						<span>{{ indexData.waite_confirmed_count }}</span>
						<p>待确认订单总数</p>
					</div>
					<div class="index-data-item" @click="goOrderList" style="cursor: pointer;">
						<span>{{ indexData.order_money }}</span>
						<p>成交订单总金额</p>
					</div>
					<div class="index-data-item" v-if="admin_id == 1">
						<span>{{ indexData.goods_number }}</span>
						<p>平台商品数量</p>
					</div>
					<div class="index-data-item" v-if="admin_id == 1">
						<span>{{ indexData.goods_down_number }}</span>
						<p>平台下架商品</p>
					</div>
					<div class="index-data-item" v-if="admin_id == 2">
						<span>{{ indexData.goods_number }}</span>
						<p>自营商品上架数量</p>
					</div>
					<div class="index-data-item" v-if="admin_id == 2">
						<span>{{ indexData.goods_down_number }}</span>
						<p>自营商品下架数量</p>
					</div>
				</div>
			</el-card>
		</div>
		<div class="index-chart index-box" v-show="admin_id != 3">
			<el-card>
				<div class="index-chart-box">
					<div class="index-chart-1eft">
						<div id="index-chart-yearVolume"></div>
					</div>
					<div class="index-chart-right" v-if="admin_id != 3">
						<h1>人员统计</h1>
						<div class="index-chart-row" v-if="admin_type == 1 || filiale_id == 2">
							<div class="index-chart-item" v-for="(item,index) in personnelList" :key="index" v-if="!item.hidden">
								<span>{{ item.value }}</span>
								<p>{{item.label}}</p>
							</div>
							<!-- <div class="index-chart-item">
								<span>{{ indexData.user_c_count }}</span>
								<p>用户</p>
							</div>
							<div class="index-chart-item">
								<span>{{ indexData.user_b_count }}</span>
								<p>商家</p>
							</div>
							<div class="index-chart-item">
								<span>{{ indexData.user_d1_count }}</span>
								<p>商家员工di</p>
							</div>
							<div class="index-chart-item">
								<span>{{ indexData.user_d2_count }}</span>
								<p>商家员工d2</p>
							</div>
							<div class="index-chart-item">
								<span>{{ indexData.user_t1_count }}</span>
								<p>平台员工t1</p>
							</div>
							<div class="index-chart-item">
								<span>{{ indexData.user_t2_count }}</span>
								<p>平台员工t2</p>
							</div>
							<div class="index-chart-item">
								<span>{{ indexData.user_f_count }}</span>
								<p>厂家</p>
							</div>
							<div class="index-chart-item">
								<span>{{ indexData.user_p_count }}</span>
								<p>分销商</p>
							</div>
							<div class="index-chart-item">
								<span>{{ indexData.user_j_count }}</span>
								<p>设计师</p>
							</div> -->
						</div>

						<div class="index-chart-row" v-if="admin_id == 2">
							<div class="index-chart-item w50width">
								<span>{{ indexData.user_c_count }}</span>
								<p>普通客户</p>
							</div>
							<div class="index-chart-item w50width">
								<span>{{ indexData.user_d1_count }}</span>
								<p>导购员</p>
							</div>
							<div class="index-chart-item w50width">
								<span>{{ indexData.user_cw_count }}</span>
								<p>商家财务</p>
							</div>
							<div class="index-chart-item w50width">
								<span>{{ indexData.user_p_count }}</span>
								<p>分销商</p>
							</div>
						</div>
					</div>
				</div>
			</el-card>
		</div>
		<div class="index-revenue index-box" v-if="admin_type == 1 || admin_type == 2 || filiale_id == 2">
			<el-card>
				<div slot="header" class="index-revenue-tit">
					<span>总的营收</span>
					<el-link type="danger" @click="goProfit">查看详情</el-link>
				</div>
				<div class="index-revenue-list">
					<ul class="flex">
						<li>
							<span>{{ allRevenueData.price }}</span>
							<p>总的业绩</p>
						</li>
						<li>
							<span>{{ allRevenueData.profit }}</span>
							<p>总的利润</p>
						</li>
					</ul>
				</div>
			</el-card>
			<el-card>
				<div slot="header" class="index-revenue-tit">
					<span>今日营收</span>
					<el-link type="danger" @click="goProfit">查看详情</el-link>
				</div>
				<div class="index-revenue-list">
					<ul class="flex">
						<li>
							<span>{{ todayRevenueData.price }}</span>
							<p>今日的业绩</p>
						</li>
						<li>
							<span>{{ todayRevenueData.profit }}</span>
							<p>今日的利润</p>
						</li>
					</ul>
				</div>
			</el-card>
		</div>
		<div class="index-revenue index-box" v-if="admin_type == 1 || admin_type == 2 || filiale_id == 2">
			<el-card>
				<div slot="header" class="index-revenue-tit">
					<span>营收数据</span>
					<el-link type="danger" @click="goProfit">查看详情</el-link>
				</div>
				<div class="index-revenue-list">
					<ul>
						<li v-for="(item, index) in performanceData.newData" :key="item.index">
							<span>{{ item.price }}</span>
							<p>{{ item.name }}业绩</p>
						</li>
						<li v-for="(item, index) in performanceData.oldData" :key="item.index">
							<span>{{ item.price }}</span>
							<p>{{ item.name }}业绩</p>
						</li>
						<li v-for="(item, index) in performanceData.newData" :key="item.index">
							<span>{{ item.profit }}</span>
							<p>{{ item.name }}利润</p>
						</li>
						<li v-for="(item, index) in performanceData.oldData" :key="item.index">
							<span>{{ item.profit }}</span>
							<p>{{ item.name }}利润</p>
						</li>
					</ul>
				</div>
			</el-card>
		</div>
	</div>

</template>

<script>
	import editName from '@/components/setting.vue';
	export default {
		data() {
			return {
				notice: '',
				admin_type: localStorage.getItem('admin_type'),
				admin_id: localStorage.getItem('admin_id'),
				filiale_id: localStorage.getItem('filiale_id'),
				storeInfo: {
					store_logo:'',
					store_name:'',
					address:'',
					service_phone:'',
					brief:''
				},
				indexData: '',
				orderData: '', // 柱状图数据
				allRevenueData: '',
				todayRevenueData: '',
				performanceData: {
					newData: [],
					oldData: []
				},
				personnelList:[
					{
						label:"用户",
						value:0
					},
					{
						label:"交易用户",
						value:0
					},
					{
						label:"商家",
						value:0
					},
					{
						label:"商家员工",
						value:0
					},
					{
						label:"平台员工",
						value:0
					},
					{
						label:"厂家",
						value:0
					},
					{
						label:"厂家员工",
						value:0
					},
					{
						label:"分销商",
						value:0,
						hidden: true
					},
					{
						label:"分公司",
						value:0,
						hidden: true
					},
					{
						label:"设计师",
						value:0
					}
				]
			};
		},
		methods: {
			init() {
				let data = {
					day: 5
				};
				if (localStorage.getItem('admin_id') == 2) {
					data.store_id = localStorage.getItem('store_id');
				}

				this.$http(this.$ApiList.MoneyContrastData, data).then(res => {
					this.allRevenueData = res.datas.all;
					this.todayRevenueData = res.datas.today;
					res.datas.week.name = '今周';
					res.datas.month.name = '今月';
					res.datas.year.name = '今年';
					res.datas.last_week.name = '上周';
					res.datas.last_month.name = '上个月';
					res.datas.last_year.name = '上一年';
					this.performanceData.newData.push(res.datas.week);
					this.performanceData.newData.push(res.datas.month);
					this.performanceData.newData.push(res.datas.year);
					this.performanceData.oldData.push(res.datas.last_week);
					this.performanceData.oldData.push(res.datas.last_month);
					this.performanceData.oldData.push(res.datas.last_year);
				});



				// 订单成交数
				let odata = {
					day: 2,
					time: 2020,
					store_id: localStorage.getItem('store_id')
				};
				this.$http(this.$ApiList.OrderData, odata).then(res => {
					if (res.code == 200) {
						// 成交数
						this.orderData = this.proofreadingTime(res.datas.succeed);
						this.$nextTick(() => {
							this.initVolume();
						});
					}
				});

				// 店铺信息
				let sdata = {
					store_id: localStorage.getItem('store_id')
				};
				this.$http(this.$ApiList.StoreInfo, sdata).then(res => {
					if(this.filiale_id != 2){
						this.storeInfo = res.datas;
					}
				});
				
				
				// 首页统计数据
				let idata = {
					store_id: localStorage.getItem('store_id')
				};
				this.$http(this.$ApiList.indexData, idata).then(res => {
					const { user_c_count, order_user_count, user_b_count, user_f_count, user_f1_count, user_p_count, user_filiale_count, user_j_count, user_t1_count, user_t2_count, user_d_count } = res.datas;
					this.indexData = res.datas;
					if(this.filiale_id == 2){
						this.storeInfo.store_name = res.datas.filiale_info.name
						this.storeInfo.address = res.datas.filiale_info.address
						this.storeInfo.store_logo = res.datas.list.store_logo
					}
					this.personnelList[0].value = user_c_count;
					this.personnelList[1].value = order_user_count;
					this.personnelList[2].value = user_b_count;
					this.personnelList[3].value = user_d_count;
					this.personnelList[4].value = Number(user_t1_count)+Number(user_t2_count);
					this.personnelList[5].value = user_f_count;
					this.personnelList[6].value = user_f1_count;
					this.personnelList[7].value = user_p_count;
					this.personnelList[8].value = user_filiale_count;
					this.personnelList[9].value = user_j_count;
				});

				// 获取公告
				this.$http(this.$ApiList.NoticeList).then(res => {
					if (res.code == 200) {
						this.notice = res.datas.data[0].content
					}
				});
			},
			proofreadingTime(data) {
				let orderData = [];
				let addTimeList = [];
				let dateContrast = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
				data.forEach(item => {
					addTimeList.push(item.add_time);
				});

				for (let i = 0; i < dateContrast.length; i++) {
					let index = addTimeList.indexOf(dateContrast[i]);
					if (index != -1) {
						orderData.push(data[index].counts);
					} else {
						orderData.push(0);
					}
				}
				return orderData;
			},
			// 初始化订单成交量图表
			initVolume() {
				let month = this.getMonths();
				let orderVolume = this.$echarts.init(document.getElementById('index-chart-yearVolume'));
				orderVolume.setOption({
					title: {
						text: '月订单成交量',
						textStyle: {
							fontSize: 18
						}
					},
					tooltip: {
						show: true,
						trigger: 'axis'
					},
					grid: {
						left: 50,
						right: 0,
						top: 50
					},
					color: ['#34a1e0'],
					xAxis: {
						type: 'category',
						data: month.reverse()
					},
					yAxis: {
						type: 'value',
						minInterval: 100
					},
					series: [{
						data: this.orderData,
						type: 'bar',
						showBackground: false
					}]
				});
			},
			// 获取月份
			getMonths() {
				let dataArr = [];
				let data = new Date();
				let year = data.getFullYear();
				data.setMonth(data.getMonth() + 1, 1);
				for (let i = 0; i < 12; i++) {
					data.setMonth(data.getMonth() - 1);
					let m = data.getMonth() + 1;
					m = m < 10 ? '0' + m : m;
					let Y = data.getFullYear();
					dataArr.push(m + '月');
				}
				return dataArr;
			},
			// 修改店铺信息
			edit() {
				this.$layer.iframe({
					title: '设置',
					maxmin: true,
					area: ['50%', '60%'],
					content: {
						content: editName, //传递的组件对象
						parent: this, //当前的vue对象
						data: {} //props
					}
				});
			},
			// 提现
			cash() {
				this.$router.push({
					path: '/cash_out'
				});
			},
			goProfit() {
				this.$router.push({
					path: '/profit_statistics'
				});
			},
			goOrderList() {
				if (this.admin_id == 1 || this.admin_id == 2) {
					this.$router.push({
						path: '/order_list'
					});
				}
			},
			goOnline() {
				this.$router.push({
					path: '/online_list'
				});
			}
		},
		created() {
			this.init();
		},
		mounted() {
			/* this.$nextTick(() => {
				this.initVolume();
			}); */
		}
	};
</script>
<style lang="scss" scoped>
	.index {
		.index-box {
			margin-bottom: 20px;

			&:last-child {
				margin-bottom: 0;
			}
		}

		.index-name {
			position: relative;

			dl {
				display: flex;

				dt {
					margin-right: 20px;

					.el-image {
						width: 100px;
						height: 100px;
						border: solid 1px #eee;
					}
				}

				dd {
					h1 {
						font-size: 18px;
						font-weight: bold;
					}

					p {
						font-size: 14px;
						color: #999;
						line-height: 28px;
					}
				}
			}

			.el-button {
				position: absolute;
				right: 20px;
				top: 20px;
			}
		}

		.index-data-row {
			display: flex;
			flex-wrap: wrap;

			.index-data-item {
				width: 20%;
				text-align: center;

				&:nth-child(-n + 5) {
					margin-bottom: 20px;
				}

				span {
					color: #1e9fff;
					font-size: 22px;
				}

				p {
					color: #666;
				}
			}
		}

		.index-chart-box {
			display: flex;
			justify-content: space-between;

			#index-chart-yearVolume {
				width: 100%;
				height: 350px;
			}

			.index-chart-1eft,
			.index-chart-right {
				flex: 1;

				h1 {
					font-size: 18px;
					margin-bottom: 20px;
				}
			}

			.index-chart-right {
				margin-left: 60px;
			}

			.index-chart-row {
				display: flex;
				flex-wrap: wrap;
				border-top: solid 1px #eee;
				border-left: solid 1px #eee;

				.index-chart-item {
					width: 20%;
					text-align: center;
					border-bottom: solid 1px #eee;
					border-right: solid 1px #eee;
					padding: 35px 0;

					span {
						color: #1e9fff;
						font-size: 22px;
					}

					p {
						color: #666;
					}
				}
			}
		}

		.index-revenue {
			display: flex;
			justify-content: space-between;

			.el-card {
				flex: 1;

				&:nth-child(2) {
					margin-left: 30px;
				}

				.index-revenue-list {
					margin: -20px -20px -21px;

					ul {
						display: flex;
						flex-wrap: wrap;

						li {
							width: 33.3333%;
							text-align: center;
							padding: 40px 0;
							border-right: solid 1px #eee;
							border-bottom: solid 1px #eee;

							span {
								color: #1e9fff;
								font-size: 22px;
							}

							p {
								color: #666;
							}
						}

						&.flex {
							li {
								flex: 1;
							}
						}
					}
				}
			}

			.index-revenue-tit {
				font-size: 18px;
				font-weight: bold;

				span {
					display: inline-block;
					vertical-align: middle;
					margin-right: 10px;
				}

				a {
					font-size: 15px;
				}
			}
		}
	}

	.w50width {
		width: 50% !important;
	}

	.image-head {
		border-radius: 50%;
	}

	.index-box .el-icon-picture-outline {
		width: 100%;
		line-height: 100px;
		text-align: center;
	}

	.index .store-brief {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.tips {
		line-height: 200px;
		text-align: center;
		font-size: 50px;
	}
</style>
